<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#table{
				text-align: center;
			}
			th, td{
				width: 100px;
				height: 30px;
				padding: 5px 10px;
				border: 1px solid gainsboro;
				cursor: pointer;
			}
			#tHead{
				background-color: steelblue;
			}
		</style>
	</head>
	<body>
		<table id="table" cellspacing="0">
			<tr id="tHead">
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>
			<tr>
				<td>1</td>
				<td>吕布</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>吕们</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>吕梦</td>
				<td>日语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>吕超</td>
				<td>营销学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>吕挚</td>
				<td>英语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>6</td>
				<td>吕上</td>
				<td>体育</td>
				<td>100</td>
			</tr>
		</table>
		
		<script>
			var tr=document.getElementsByTagName("tr");
			for(i=1;i<tr.length;i++){
				if(i%2!=0){
					tr[i].style.backgroundColor = "gainsboro";
				}
				else{
					tr[i].style.backgroundColor = "darkgray";
				}
				
				var bc="";
				tr[i].onmouseover = mouseOn;
				tr[i].onmouseout = mouseOut;
				function mouseOn(){
					bc=this.style.backgroundColor;
					this.style.backgroundColor = "white";
				}
				function mouseOut(){
					this.style.backgroundColor = bc;
				}
			}
			
		</script>
	</body>
</html>
